<template>
    <div class="score-next">
        <div class="card">
            <div class="label">选择会员类型</div>
            <ul class="vip-type flex">
                <li v-for="(item,index) in score_arr" class="flex-around" :class="{'noChong':index < level,'defaultChont':index == level && tabIndex == level,'vt-active':tabIndex == index && tabIndex >=level}" @click="selectMoney(index,$event)">
                    <p class="vt-t">
                        <span v-if="index == 0">一</span
                        ><span v-if="index == 1">二</span
                        ><span v-if="index == 2">三</span
                        ><span v-if="index == 3">四</span
                        ><span v-if="index == 4">五</span>级爱心大使</p>
                    <h1><span>￥</span>{{item.needmoney}}</h1>
                    <p class="vt-b">开通后可立即众筹</p>
                </li>
            </ul>
        </div>
        <div class="card">
            <div class="label">选择支付方式</div>
            <div class="a-type flex">
                <label for="wx" class="flex">
                    <input type="radio" name="type" value="0" id="wx" v-model="type">
                    <img src="../../assets/img/wxpay.png" alt="">
                    微信账户
                </label>
                <label for="alipy" class="flex">
                    <input type="radio" name="type" value="1" id="alipy"  v-model="type">
                    <img src="../../assets/img/apay.png" alt="">
                    支付宝账户
                </label>
            </div>
            <div class="qrcode-box">
                <div class="qrcode">
                    <img :src="qrcode" alt="">
                </div>
                <p>点击保存到相册，前往微信/支付宝进行支付后，<br>
                    截图付款凭证，后台审核后充值成功。</p>
            </div>
        </div>
        <div class="card">
            <div class="label">上传付款凭证 <span></span></div>
            <div class="upload-box flex-center">
                <div>
                    <img src="../../assets/img/camera.png" alt="">
                    <p>上传支付凭证</p>
                </div>
                <img :src="image" alt="" v-if="image">
                <input type="file" accept="image/*" @change="upload">
            </div>
        </div>
        <div class="btn flex">
            <a class="left-btn flex-center" download :href="qrcode">保存到相册</a>
            <button class="right-btn" @click="submit">完成</button>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: "scoreInNext",
        data(){
            return{
                score_arr:[],
                qrcode:"",
                image:"",
                type:0,
                pay_type:[],
                level:null,
                money:"",
                isDefault:true,
                tabIndex:null
            }
        },
        created(){
            this.level = this.$route.query.level;
            this.tabIndex = this.level;
            this.getRank()
        },
        mounted(){
            this.getData()
        },
        methods:{
            getRank(){
                this.$http.post("User/rank",{}).then(res=>{
                    console.log(res)
                    this.score_arr = res.data;
                })
            },
            selectMoney(index,e){
              if(index >= this.level){
                  $(e.target).siblings().removeClass('defaultChont');
                  this.tabIndex = index;
                  this.money = this.score_arr[index];
              }
            },
            upload(e){
                let file = e.target.files[0]
                let reader = new FileReader();
                reader.readAsDataURL(file)
                reader.onload = e => {
                    this.$http.post('uploads/image',{
                        base64:e.target.result
                    }).then(res1=>{
                        console.log(res1)
                        this.image = res1.data;
                    })
                }
            },
            getData(){
                this.$http.post('user/payList',{}).then(res=>{
                    console.log(res)
                    this.pay_type = res.data;
                    this.qrcode = res.data[0].image;
                })
            },
            submit(){
                console.log(Number(this.tabIndex)+1)
                this.$vux.confirm.show({
                    title: "提示",
                    content: "是否确认充值?",
                    // 组件除show外的属性
                    onCancel: () => {
                    },
                    onConfirm: () => {
                        if(!this.image){
                            this.$toast('请上传支付凭证');
                            return
                        }
                        this.$http.post('User/upgrade',{
                            type:this.type,
                            money:this.money,
                            image:this.image,
                            rank:Number(this.tabIndex)+1
                        }).then(res=>{
                            console.log(res)
                            this.$toast(res.msg)
                            if(res.code == 1){
                                setTimeout(()=>{
                                    this.$router.go(-2)
                                },500)
                            }
                        })
                    }
                })


            }
        },
        watch:{
            type:function (newVal) {
                if(this.pay_type.length){
                    this.qrcode = this.pay_type[newVal].image
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .score-next{
        padding: 20px 30px 120px;
        box-sizing: border-box;
        .card{
            background-color: #ffffff;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 30px;
            margin-bottom: 60px;
            .vip-type{
                flex-wrap: wrap;
                li{
                    width: 194px;
                    height: 194px;
                    border-radius: 10px;
                    border: solid 2px #185fff;
                    flex-direction: column;
                    margin-right: 24px;
                    margin-top: 24px;
                    box-sizing: border-box;
                    padding: 18px 0;
                    color: #185fff;
                    &:nth-child(3n){
                        margin-right: 0;
                    }
                    .vt-t{
                        font-size: 24px;
                    }
                    .vt-b{
                        font-size: 20px;
                        white-space: nowrap;
                        transform: scale(0.8);
                    }
                    h1{
                        font-weight: normal;
                        span{
                            font-size: 24px;
                        }
                    }
                }
                .noChong{
                    border-color: #999;
                    color:#999;
                }
                .defaultChont{
                    border-color: #185fff;
                    background: #185fff;
                    color:white;
                }
                .vt-active{
                    border-color: #185fff;
                    background: #185fff;
                    color:white;
                }
            }
            .label{
                font-size: 32px;
                color: #333333;
                font-weight: bold;
                span{
                    font-size: 24px;
                    color: #666666;
                    font-weight: normal;
                }
            }
            .a-type{
                padding-top:30px;
                label{
                    width: 50%;
                    font-size: 28px;
                    color: #333333;
                }
                input{
                    width: 36px;
                    height: 36px;
                    appearance: none;
                    position: relative;
                    border: 2px solid #7d7d7d;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                input:checked{
                    border-color: #185fff;
                }
                input:checked:before{
                    content: '';
                    width: 16px;
                    height: 16px;
                    background:#185fff;
                    border-radius: 50%;
                }
                img{
                    width: 40px;
                    margin:0 15px;
                }
            }
            .qrcode-box{
                .qrcode{
                    width: 354px;
                    height: 354px;
                    margin: 60px auto 30px;
                    background: url("../../assets/img/kuang.png") no-repeat 100% 100%;
                    background-size: 100% 100%;
                    box-sizing: border-box;
                    padding: 25px;

                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                p{
                    text-align: center;
                    font-size: 24px;
                    line-height: 36px;
                    color: #999999;
                }
            }
            .upload-box{
                width: 200px;
                height: 200px;
                background-color: #f9f9f9;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
                margin-top: 20px;
                div{
                    text-align: center;
                    p{
                        font-size: 24px;
                        color: #999999;
                        margin-top: 5px;
                    }
                }
                &>img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height:100%;
                    object-fit: cover;
                    background: white;
                }
                input{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height:100%;
                    z-index: 1;
                    opacity: 0;
                }
            }
        }
        .btn{
            position: fixed;
            bottom:0;
            left: 0;
            width: 100%;
            .left-btn{
                background: #b5cafb;
                color:#185fff;
                width: 40%;
                height: 98px;
                font-size: 32px;
            }
            .right-btn{
                background: #185fff;
                color:white;
                width: 60%;
                height: 98px;
            }
        }
    }
</style>
